<%@page contentType="text/html;charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
%>

<%@page import="mobile.BrandModelSeparator"%>
<%@page import="mobile.MobileType"%>
<%@page import="srv.MobileOffersProxy"%>
<%@page import="client.Starter"%><html>
<head>
<title>Mobile Offers</title>
<script>
	function onBrandChanged() {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//alert(xmlhttp.responseText);
				updateModels(xmlhttp.responseText);
			}
		}
		var brandSelect = document.getElementById("brandSelect");
		var brandId = brandSelect.options[brandSelect.selectedIndex].value;
		var saveButton = document.getElementById("saveButton");

		if (brandId == "0") {
			saveButton.setAttribute("disabled", "disabled");
		} else {
			saveButton.removeAttribute("disabled");

		}

		xmlhttp.open("GET", "../MobileServlet?action=getModels&brandId="
				+ brandId, true);
		xmlhttp.send();
	}

	function updateModels(/*String*/modelsString) {
		var stringSplit = modelsString.split("\n");
		console.debug(stringSplit);

		var modelSelect = document.getElementById("modelSelect");
		modelSelect.length = 0; //removes all options

		for ( var i = 1; i < stringSplit.length - 2; i++) {
			var idNameArr = stringSplit[i].split(",");
			modelSelect.options[modelSelect.options.length] = new Option(
					idNameArr[1], idNameArr[0]);
		}
	}

	function onSaveClicked() {
		var brandSelect = document.getElementById("brandSelect");
		var brandId = brandSelect.options[brandSelect.selectedIndex].value;

		var modelSelect = document.getElementById("modelSelect");
		var modelId = modelSelect.options[modelSelect.selectedIndex].value;

		var yearSelect = document.getElementById("yearSelect");
		var year = yearSelect.options[yearSelect.selectedIndex].value;

		var price = document.getElementById("priceText").value;

		var contact = document.getElementById("contactText").value;

		console.debug("brandId: " + brandId + " modelId: " + modelId
				+ " year: " + year + " price: " + price);
		var isValid = isValidOffer(brandId, modelId, year, price, contact);
		console.debug('offer valid', isValid);

		if (isValid == true) {
			//write the query

			var xmlhttp;
			if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else {// code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					console.debug("save");
					alert("save request sent!");
				}
			}
			xmlhttp.open("GET", "../MobileServlet?action=saveOffer&brandId="
					+ brandId + "&modelId=" + modelId + "&year=" + year
					+ "&price=" + price + "&contact=" + contact, true);
			xmlhttp.send();
		} else {
			alert("some of the fields is filled wrong!");
		}

	}

	function isValidOffer(brandId, modelId, year, price, contact) {
		var isValid = true;
		if (!brandId || brandId <= 0) {
			isValid = false;
		}
		if (!modelId || modelId <= 0) {
			isValid = false;
		}
		if (!year || year < 1990) {
			isValid = false;
		}
		if (!price || price <= 0) {
			isValid = false;
		}
		if (!contact || contact.trim().length == 0
				|| contact.trim().length > 20) {
			isValid = false;
		}

		return isValid;
	}
	
	function validateMail(){
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var contactMessageSpan = document.getElementById("contactMessage");
				var saveButton = document.getElementById("saveButton");
				
				if(xmlhttp.responseText == "OK"){
					contactMessageSpan.innerHTML = "the mail is valid";
				} else {
					contactMessageSpan.innerHTML = xmlhttp.responseText;
				}
			}
		}
		
		var contact = document.getElementById("contactText").value;
		
		xmlhttp.open("GET", "http://localhost:8080/MailRESTValidatorProject/MailValidator?mail=" + contact);
		xmlhttp.send();
	}
	
</script>
</head>
<body>
<jsp:useBean id="sampleMobileOffersProxyid" scope="session"
	class="srv.MobileOffersProxy" />
<%
	if (request.getParameter("endpoint") != null
			&& request.getParameter("endpoint").length() > 0)
		sampleMobileOffersProxyid.setEndpoint(request
				.getParameter("endpoint"));
%>

<table>
	<tr>
		<td>Select brand:</td>
		<td><select id="brandSelect" onChange="onBrandChanged()">
			<option value="0">-</option>
			<%
				String brands = sampleMobileOffersProxyid.getAllBrands();
				BrandModelSeparator separator = new BrandModelSeparator(brands);
				MobileType[] types = separator.getTypes();
				for (int i = 0; i < types.length; i++) {
			%>
			<option value="<%=types[i].getId()%>"><%=types[i].getName()%></option>
			<%
				}
			%>
		</select></td>
	</tr>
	<tr>
		<td>Select model:</td>
		<td><select id="modelSelect">
		</select></td>
	</tr>
	<tr>
		<td>Year:</td>
		<td><select id="yearSelect">
			<%
				java.util.Calendar cal = java.util.Calendar.getInstance();
				int currentYear = cal.get(java.util.Calendar.YEAR);
				for (int i = 0; i < 15; i++) {
			%>
			<option value="<%=currentYear - i%>"><%=currentYear - i%></option>
			<%
				}
			%>
		</select></td>
	</tr>
	<tr>
		<td>Price ($):</td>
		<td><input type="text" id="priceText" size="8"></td>
	</tr>
	<tr>
		<td>Enter email for contact:</td>
		<td><input type="text" id="contactText" onblur="validateMail();"></td>
		<td><span id="contactMessage" /></td>
	</tr>
</table>
<input type="button" id="saveButton" disabled="disabled" value="Save"
	onClick=
	onSaveClicked();;
>
</body>
</html>